<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-表单数据验证</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
        </style>
    </head>
    <body>
       <h3>用户登录</h3>
       <form action="" onsubmit="return validform(this)">
         <div>
            <label for="uname">账号</label>
            <input id="uname" type="text" name="uname">
         </div>
         <div>
            <label for="upwd">口令</label>
            <input id="upwd" type="password" name="upwd">
         </div>
         <div>
            <button>登录</button>
         </div>
       </form>
       <script>
           let log = console.log;
           function validform(_form){
               // 获取并控制台打印两个input输入的内容
               log(_form.uname.value, _form.upwd.value);
               // 验证任务： 1. 用户名不能为空且字符不低于6个  2. 口令不能少于8位的数字
               // 如果验证成功则返回true(提交表单), 反之，则返回false
               if(!/[a-zA-Z]\w{5,}/.test(_form.uname.value)){
                  alert("用户名至少6个英文开头的字符!");
                  return false;
               }
               if(!/\d{8,}/.test(_form.upwd.value)){
                  alert("口令不能低于8位的数字!");
                  return false;
               }

               return true; //  false表示不提交表单, true 提交表单
           }
       </script>
    </body>
</html>
